<template>
  <van-list
    class="film-now"
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div
      class="item-list"
      v-for="item in filmComingList"
      :key="item.filmId"
      ref="wrapper"
      @click="toFlimDetail(item.filmId)"
    >
      <div class="left">
        <img :src="item.poster" alt="" />
      </div>
      <div class="middle">
        <div class="name fz16 ellipsis">
          <span> {{ item.name }} </span>
          <span class="film-type fz12"> {{ item.filmType.name }} </span>
        </div>
        <div class="star ellipsis fz14">
          <span>主演: </span
          ><span v-for="subitem in item.actors" :key="subitem.name"
            >{{ subitem.name }}
          </span>
        </div>
        <div class="info ellipsis fz12">
          <span
            >上映日期:{{
              moment.unix(item.premiereAt).format("星期d M月D日")
            }}</span
          >
        </div>
      </div>
      <div class="right fz14">
        <span v-if="item.isPresale">预购</span>
      </div>
    </div>
  </van-list>
</template>

<script>
export default {
  name: "filmComing",
  // 父子传值将Film组件中请求到的列表展示在组件中
  props: ["filmList","cityInfo"],
  data() {
    return {
      bs: null,
      format: "",

      filmComingList: [],
      loading: false,
      finished: false,
      //无限下拉请求的页数
      pageNum: 1,
      comingRes:null
    };
  },
  created() {
    this.filmComingList = this.filmList;
  },
  mounted() {},
  // 时间格式进行转换  问题是一直只有一个时间，还是不正确的  十位时间戳和十三位时间戳的转换
  methods: {
    toFlimDetail(filmId) {
      this.$router.push({
        path: "/film/" + filmId,
      });
    },

    onLoad() {
      let that =this;
      that.pageNum++;
      // 异步更新数据
      this.axios
        .get(process.env.VUE_APP_BASE_URL,{
          headers:{
            "X-Host": "mall.film-ticket.film.list",
          },
          params:{
            cityId: that.cityInfo.cityId,
            pageNum:that.pageNum,
            pageSize:10,
            type:2,
            k:3223539
           
          }
        })
        
        .then((res)=>{
          that.comingRes=res.data.data.films;
          //将数组转换成对象放进去
          that.filmComingList.push(...that.comingRes);
          //继续请求数据
          that.loading=false;
          if ( that.comingRes.length==0) {
            that.finished=true;
          }
        })
        .catch((error)=>{
          console.log(error);
        })
    },

  },
};
</script>

<style scoped lang="scss">
.film-now {
  .item-list {
    display: flex;
    flex-direction: row;
    justify-content:flex-start;

    align-items: center;
    padding: 15px 0;
    text-align: center;
    border-top: 1px solid #ededed;

    .left {
      width: 66px;
      flex-shrink: 0;
    }
    .middle {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      text-align: left;
      margin: 0 5px;
      width: 168px;
      padding: 0 10px;
      .name {
        margin: 2px 0;
        .film-type {
          width: 20px;
          background-color: #d2d6dc;
          border-radius: 5px;
        }
      }
      .star {
        margin: 5px 0;
      }
      .score {
        height: 17px;
        color: #fff;
      }
    }
    .right {
      width: 50px;
      flex-shrink: 0;
      span {
        color: #ffb232;
        padding: 5px;
        border: 1px solid #ffb232;
      }
    }
  }
}
</style>
